<template>
  <div class="all">
    <section id="TopNav">
      <div id="top">
        <span id="return">&lt;</span>
        <div id="Toptext">购物车<i class="iconfont icon-027weizhidian1"></i></div>
        <span id="pay-problem">管理</span>
        <p class="address">服务地址：立人科技</p>
      </div>
    </section>
    <div class="main">
        <div class="subject goods" v-for="(v,i) in arr" :key="i">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <input type="checkbox" name="" id="checkbox" :value="v.sid" v-model="v.checkitem" @change="selectone()">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
              </div>
              <div class="buy">
                  <!-- <span class="buy-num">共1件</span>
                  <span class="buy-text">应付金额:</span> -->
                  <span class="buy-pirce">￥{{v.gpirce*v.gnum}}.00</span>
                  <div class="buy-button">
                      <button @click="reduce(i)">-</button>
                      <!-- <input type="number" v-model="num"> -->
                      <input ref="dd" type="number" :value="v.gnum">
          
                      <button @click="add(i)">+</button>
                  </div>
              </div>
              <button class="del" @click="del(i)">删除</button>
               
          </div>
    </div>
    <div class="account">
      <div class="account-left">
        <div class="checkall">
          <input type="checkbox" v-model="checkall" @click="selectall()">
          <span>全选</span>
        </div>
        <span class="account-pirce">合计：{{sum}}元</span>
      </div>
      <button class="balance">去结算</button>
    </div>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
// import cosmetologyVue from './cosmetology.vue';
export default {
  data(){
       return{
           arr:[],
           checkall:false
       }
   },
   mounted(){
       getlink("/data/list/value").then((ok)=>{
           console.log(ok.data)
           this.arr=ok.data
          //  this.arr=this.arr.slice(0,3)
       })
   },
   computed:{
     sum(){
       var total=0;
       for (var i=0;i<this.arr.length;i++){
         if(this.arr[i].checkitem || this.checkall){
           total+=parseFloat(this.arr[i].gpirce)*parseFloat(this.arr[i].gnum)
         }
         
       }
       return total;
     }
   },
  //  watch:{
  //    checkall(){
  //       console.log(this.checkall)
  //       this.arr.forEach(item=>{
  //       item.checkitem=this.checkall
  //     })
  //    }
  //  },
   filters:{
       sub(val){
           return val.substring(0,10)+"..."
       },
       mult(val){
         return val.gpirce*val.gnum
       }
   },
   props:["sid","sname","imgurl","gname","gsize","gpirce","gnum"],
   methods:{
     add(i){
      
      //  this.$refs.dd[i].value++
       this.arr[i].gnum++
     },
     reduce(i){
       if(this.arr[i].gnum<=1){
         this.arr[i].gnum=1 
       }else{
         this.arr[i].gnum--;
       }
     },
     del(i){
       this.arr.splice(i,1)
     },
     selectall(){
      
        console.log(this.checkall)
        this.arr.forEach(item=>{
          item.checkitem=!this.checkall
        })
        // this.arr[0].checkitem=true
        console.log(this.arr)

      
     },
     selectone(){
       var num=this.arr.filter(item=>item.checkitem).length;
       console.log(this.arr)
       console.log(num)
       if (num==this.arr.length){
         this.checkall=true;
       }else{
         this.checkall=false;
       }
      //  this.checkall=this.arr.every(item=>item.checkall)
     }
   }
};
</script>

<style scoped>
    @import url("http://at.alicdn.com/t/font_2798905_iiusyb0mxlm.css");
    .all{
        background-color: #f7f7f7;
    }
    #TopNav {
        width: 100%;
        height: 1rem;
        position: fixed;
        top: 0;
        background-color: #f7f7f7;
    }
    #top {
        position: relative;
    }
    #return {
        font-size: 0.3rem;
        position: absolute;
        top: 0.3rem;
        left: 4%;
    }
    #Toptext {
        text-align: center;
        line-height: 1rem;
        font-size: 0.3rem;
    }
    #pay-problem {
        position: absolute;
        top: 0.35rem;
        left: 6.5rem;
    }
    .address{
        position: absolute;
        left: 2.6rem;
        top: 0.7rem;
        color: #9d9d9d;
    }
    /* main */
    .main{
        margin-top: 1rem;
        background-color: #f7f7f7;
        margin-bottom: 1rem;
    }


    /* goods */
  .icon-shouye{
        font-size: 0.2rem;
    }
    .goods{
      position: relative;
    }
    .goods-main{
        display: flex;
    }
    .goods-img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-img img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-introduce{
        font-size: 0.3rem;
    }
    .goods-size{
        color: #666666;
    }
    .goods-number{
        text-align: right;
    }

    /* buy */
    .buy{
      text-align: left;
      padding-left: 1.5rem;
      display: flex;
    }
    .buy-num{
      color: #b4b4b4;
      margin-right: 0.1rem;
    }
    .buy-text{
      margin-right: 0.1rem;
    }
    .buy-pirce{
      color: #a02d26;
      font-size: 0.3rem;
      font-weight: bold;
    }

    /* buy-again */
    .buy-again{
      text-align: right;
      padding-top: 0.2rem;
    }
    .buy-again button{
      background-color: #cab394;
      color:white;
      border: none;
      width: 2rem;
      height: 0.6rem;
      border-radius: 0.5rem;

    }

    /* checkbox */
    #checkbox{
      margin-top: 0.6rem;
    }

    /* buy-button */
    .buy-button{
      margin-left: 2.3rem;
    }
    .buy-button button{
      width: 0.4rem;
      height: 0.4rem;
      vertical-align: middle;
    }
    .buy-button input{
      width: 0.6rem;
      height: 0.3rem;
      vertical-align: middle;
      text-align: center;
    }
    
    /* del删除 */
    .del{
      position: absolute;
      left: 6rem;
      top: 1.3rem;
      border-radius: 50%;
      height: 0.7rem;
      width: 0.7rem;
      background: orange;
      font-size: 0.2rem;
      color: #ffffff;
      font-weight: bold;
      border: none;
    }
    /* account */
    .account{
      width: 100%;
      height: 1rem;
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      line-height: 1rem;
    }
    .account-left{
      display: flex;
      margin-left: 0.3rem;
    }
    .balance{
      margin-right: 0.3rem;
    }
    .account-pirce{
      margin-left: 0.3rem;
      font-size: 0.4rem;
      font-weight: bold;
    }
    .balance{
      background-color: #CFB290;
      color: #ffffff;
      font-weight: bold;
      border: none;
      line-height: 0.7rem;
      font-size: 0.3rem;
      margin-top: 0.1rem;
      border-radius: 0.2rem;
      width: 2rem;
      height: 0.8rem;

    }
</style>